import { Calendar, Sparkles, Edit2, Trash2 } from "lucide-react";
import type { Memo } from "@/services/memo.service";
import { MoodEmoji } from "./MoodEmoji";

interface MemoCardProps {
  memo: Memo;
  onEdit: (memo: Memo) => void;
  onDelete: (id: string) => void;
}

export function MemoCard({ memo, onEdit, onDelete }: MemoCardProps) {
  return (
    <div className="relative pl-8 pb-8">
      {/* 时间线 */}
      <div className="absolute left-0 top-0 bottom-0 w-px bg-border">
        <div className="absolute top-6 left-0 w-2 h-2 -ml-1 rounded-full bg-primary" />
      </div>

      {/* 笔记卡片 */}
      <div className="bg-card rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
        <div className="flex justify-between items-start mb-4">
          <div className="flex items-center gap-2">
            <Calendar className="w-4 h-4 text-muted-foreground" />
            <span className="text-sm text-muted-foreground">
              {new Date(memo.createdAt).toLocaleString()}
            </span>
          </div>
          {memo.mood && (
            <MoodEmoji level={memo.mood.level} />
          )}
        </div>

        <div className="space-y-4">
          <p className="text-lg leading-relaxed">{memo.content}</p>
          {memo.advice ? (
            <div className="bg-primary/5 rounded-lg p-4 space-y-2">
              <div className="flex items-center gap-2 text-primary">
                <Sparkles className="w-4 h-4" />
                <span className="font-medium">AI 建议</span>
              </div>
              <p className="text-sm text-muted-foreground">
                {memo.advice}
              </p>
            </div>
          ) : null}
        </div>

        <div className="flex justify-end gap-2 mt-4 pt-4 border-t">
          <button
            onClick={() => onEdit(memo)}
            className="p-2 hover:bg-accent rounded-lg transition-colors"
          >
            <Edit2 className="w-4 h-4" />
          </button>
          <button
            onClick={() => onDelete(memo._id)}
            className="p-2 hover:bg-destructive/10 text-destructive rounded-lg transition-colors"
          >
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
} 